<!--
  @author:  long
  @date:    2023/4/6
  @file:    绩效列表
  @require:
-->
<template>
  <div class="performanceList">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      v-loading="loading"
      border
      @row-click="handleRowClick"
    >
      <el-table-column
        v-for="(col, index) in columns"
        :prop="col.prop"
        :key="index"
        :label="col.label"
        :sort-by="sortField"
        :sort-orders="['descending']"
        :sortable="getSortable(col.prop)"
      >
        <template v-if="col.slot" #default="scope">
          <!--     优秀人数       -->
          <template v-if="col.prop == 'yxrs'">
            <el-button
              type="primary"
              link
              @click.stop="checkTableType('1', scope.row)"
            >
              {{ scope.row[col.prop] }}
            </el-button>
          </template>
          <!--     良好人数       -->
          <template v-if="col.prop == 'lhrs'">
            <el-button
              type="primary"
              link
              @click.stop="checkTableType('2', scope.row)"
            >
              {{ scope.row[col.prop] }}
            </el-button>
          </template>
          <!--     一般人数       -->
          <template v-if="col.prop == 'ybrs'">
            <el-button
              type="primary"
              link
              @click.stop="checkTableType('3', scope.row)"
            >
              {{ scope.row[col.prop] }}
            </el-button>
          </template>

          <!--     及格人数       -->
          <template v-if="col.prop == 'jgrs'">
            <el-button
              type="primary"
              link
              @click.stop="checkTableType('4', scope.row)"
            >
              {{ scope.row[col.prop] }}
            </el-button>
          </template>
          <!--     不及格人数       -->
          <template v-if="col.prop == 'bjgrs'">
            <el-button
              type="primary"
              link
              @click.stop="checkTableType('5', scope.row)"
            >
              {{ scope.row[col.prop] }}
            </el-button>
          </template>
          <template v-if="col.prop == 'resultLevel'">
            <template v-if="scope.row.resultLevel != null">
              <dict-tag
                :options="assessment_rating"
                :value="scope.row.resultLevel"
              />
            </template>
            <div v-else>--</div>
          </template>
        </template>
        <template v-else #default="scope">
          {{ scope.row[col.prop] != null ? scope.row[col.prop] : '--' }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" width="90%">
      <template #title>
        <span class="text-2xl font-semibold">绩效明细</span>
        <span class="text-xl pl-5">
          <span>姓名：{{ personInfo.nickName }}</span>
          <span class="px-3"
            >月份：{{ personInfo.assessAtYear }}-{{
              personInfo.assessAtTime
            }}</span
          >
          <span
            >考核得分：<span style="color: red; font-weight: bold">{{
              personInfo.resultScore
            }}</span></span
          >
        </span>
      </template>
      <PerformanceDetails
        :tableData="personDetails"
        :personInfo="personInfo"
        :isActive="isActive"
      />

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PerformanceList">
import { getCurrentInstance } from 'vue'
import useUserStore from '@/store/modules/user'
import { getAssessViewList } from '@/api/officeManage/performance'
import PerformanceDetails from './details'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()

const props = defineProps({
  tableType: {
    type: String,
    default: 'personList'
  },
  tableData: {
    type: Array,
    default: () => {}
  },
  queryForm: {
    type: Object,
    default: () => {}
  },
  isActive: {
    type: String,
    default: ''
  },
  slsdVal: {
    type: Array,
    default: () => []
  },
  tableLoading: {
    type: Boolean,
    default: () => false
  }
})

watchEffect(
  () => {
    tableType.value = proxy.tableType
    tableData.value = props.tableData
    isActive.value = props.isActive
    slsdVal.value = props.slsdVal
    loading.value = props.tableLoading
    console.info('tableLoading', props.tableLoading)
    switchCols(tableType.value)
  },
  {
    flush: 'post'
  }
)

const data = reactive({
  loading: false,
  isActive: '',
  dialogVisible: false,
  tableType: '',
  tableData: [],
  columns: [],
  columnObj: {
    //   个人
    personCol: [{ label: '姓名', prop: 'nickName', slot: false }],
    //时间
    dateCol: [
      { label: '年度', prop: 'assessAtYear', slot: false },
      { label: '考评时间', prop: 'assessAtTimeStr', slot: false }
    ],
    //绩效得分评级
    scoreCol: [
      { label: '自评得分', prop: 'resultScoreSelf', slot: false },
      { label: '考核得分', prop: 'resultScore', slot: false },
      { label: '考核等级', prop: 'resultLevel', slot: true }
    ],
    //单位
    orgCol: [{ label: '单位', prop: 'comName', slot: false }],
    //  部门
    deptCol: [{ label: '部门', prop: 'bmName', slot: false }],
    // 统计类 平均分 优秀人数 良好人数 及格人数
    statCol: [
      { label: '平均分', prop: 'avgScore', slot: false },
      { label: '优秀人数', prop: 'yxrs', slot: true },
      { label: '良好人数', prop: 'lhrs', slot: true },
      { label: '一般人数', prop: 'ybrs', slot: true },
      { label: '及格人数', prop: 'jgrs', slot: true },
      { label: '不及格人数', prop: 'bjgrs', slot: true }
    ]
  },
  personDetails: [], //考核明细
  slsdVal: []
})
const {
  loading,
  isActive,
  tableData,
  columnObj,
  columns,
  tableType,
  dialogVisible,
  personDetails,
  slsdVal
} = toRefs(data)
const personInfo = ref({})
const sortField = ref(['resultScore', 'resultLevel'])

const { assessment_rating } = proxy.useDict('assessment_rating')
const switchCols = type => {
  console.info('type', type)
  switch (type) {
    //个人绩效-人员列表
    case 'personList':
      console.info('columnObj.value.person', columnObj.value.personCol)
      columns.value = [
        ...columnObj.value.personCol,
        ...columnObj.value.dateCol,
        ...columnObj.value.scoreCol
      ]
      console.info('props.tableData', props.tableData)

      // let tableObj = {
      //   assessAtTime: null,
      //   assessAtYear: props.queryForm.year,
      //   avgScore: null,
      //   bmName: null,
      //   comName: null,
      //   jgrs: null,
      //   lhrs: null,
      //   nickName: userStore.user.nickName,
      //   resultLevel: null,
      //   resultScore: null,
      //   resultScoreSelf: null,
      //   yxrs: null
      // }
      //
      // let arr = []
      // for (let i = 0; i < 12; i++) {
      //   let obj = {}
      //   let index = -1
      //   if (props.tableData.length > 0) {
      //     index = props.tableData.findIndex(item => {
      //       return parseInt(item.assessAtTime) == i + 1
      //     })
      //   }
      //   if (index != -1) {
      //     arr.push(props.tableData[index])
      //   } else {
      //     obj = { ...{}, ...tableObj }
      //     if (i <= 8) {
      //       obj.assessAtTime = '0' + (i + 1)
      //     } else {
      //       obj.assessAtTime = i + 1
      //     }
      //     obj.id = 'a' + (i + 1)
      //     arr.push(obj)
      //   }
      // }
      // console.info('arr', arr)
      // tableData.value = arr

      break
    //   部门人员
    case 'deptPersonList':
      columns.value = [
        ...columnObj.value.orgCol,
        ...columnObj.value.deptCol,
        ...columnObj.value.personCol,
        ...columnObj.value.dateCol,
        ...columnObj.value.scoreCol
      ]
      break
    //部门列表
    case 'deptList':
      columns.value = [
        ...columnObj.value.orgCol,
        ...columnObj.value.deptCol,
        ...columnObj.value.dateCol,
        ...columnObj.value.statCol
      ]
      break
    //   单位列表
    case 'orgList':
      columns.value = [
        ...columnObj.value.orgCol,
        ...columnObj.value.dateCol,
        ...columnObj.value.statCol
      ]
      break
  }
}
const emits = defineEmits(['checkMode'])

/**
 * 获取哪些列可以排序
 * @param prop
 * @returns {boolean}
 */
const getSortable = prop => {
  let array = ['resultScore', 'resultLevel']
  return array.includes(prop)
}

/**
 * 表格行点击
 */
const handleRowClick = row => {
  console.info('row', row)
  if (tableType.value == 'deptPersonList' && slsdVal.value[0] == '01') {
    let params = {
      appraiseeId: row.appraiseeId,
      assessAtTime: row.assessAtTime,
      assessTimeType: row.assessTimeType,
      assessAtYear: row.assessAtYear,
      resultLevel: row.resultLevel
    }
    getAssessViewList(params).then(res => {
      personDetails.value = res.data
      dialogVisible.value = true
      personInfo.value = row
    })
  }
}

/**
 *
 * @param level
 * @param row
 */
const checkTableType = (level, row) => {
  emits('checkMode', level, row)
}

const init = () => {}
init()
</script>

<style scoped lang="scss"></style>
